<template>

    <headerHome></headerHome>

    <section class="hot-container" id="are1" ref="are1">
        <div class="center_c hot-box" style="position: relative;">
            <div class="hot-nav">
                <h2 class="nav-title">当季热门推荐</h2>
                <div class="nav-tabs pointer-style-pointer">
                    <div @click="tabEnter(0)" :class="tabsIndex == 0 ? 'nav-tab-active' : ''">出境
                        <div v-show="tabsIndex == 0" class="triangle"></div>
                    </div>
                    <div @click="tabEnter(1)" :class="tabsIndex == 1 ? 'nav-tab-active' : ''">国内
                        <div v-show="tabsIndex == 1" class="triangle"></div>
                    </div>
                    <div @click="tabEnter(2)" :class="tabsIndex == 2 ? 'nav-tab-active' : ''">周边
                        <div v-show="tabsIndex == 2" class="triangle"></div>
                    </div>
                    <div @click="tabEnter(3)" :class="tabsIndex == 3 ? 'nav-tab-active' : ''">海岛
                        <div v-show="tabsIndex == 3" class="triangle"></div>
                    </div>
                </div>
            </div>
            <div class="hot-list" style="height:284px">
                <CustomCard v-for="rs in hotItem" :key="rs.id" width="264" height="284" imgHeight="192"
                    :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>

            </div>

            <div class="affix">
                <el-affix>
                    <div class="side-nav">
                        <div @click="clickNav(1)" :class="scrollNavId == 1 ? 'side-title side-title-show' : 'side-title'">
                            当季热门</div>
                        <div @click="clickNav(2)" :class="scrollNavId == 2 ? 'side-title side-title-show' : 'side-title'">
                            畅游国内</div>
                        <div @click="clickNav(3)" :class="scrollNavId == 3 ? 'side-title side-title-show' : 'side-title'">
                            尊享欧洲</div>
                        <div @click="clickNav(4)" :class="scrollNavId == 4 ? 'side-title side-title-show' : 'side-title'">
                            玩转亚洲</div>
                        <div @click="clickNav(5)" :class="scrollNavId == 5 ? 'side-title side-title-show' : 'side-title'">
                            畅玩非洲</div>
                        <div @click="clickNav(6)" :class="scrollNavId == 6 ? 'side-title side-title-show' : 'side-title'">
                            尊享美洲</div>
                        <div @click="clickNav(7)" :class="scrollNavId == 7 ? 'side-title side-title-show' : 'side-title'">
                            大洋洲</div>
                        <div @click="clickNav(8)" :class="scrollNavId == 8 ? 'side-title side-title-show' : 'side-title'">
                            缤纷海岛</div>
                        <div @click="clickNav(9)" :class="scrollNavId == 9 ? 'side-title side-title-show' : 'side-title'">
                            主题游</div>
                        <div @click="clickNav(10)"
                            :class="scrollNavId == 10 ? 'side-title side-title-show' : 'side-title'">热门签证</div>
                    </div>
                </el-affix>
            </div>
        </div>


    </section>

    <section class="domestic box" id="are2" ref="are2">
        <div class="domestic-title">
            <h2 class="h2">畅游国内</h2>
            <router-link target="_blank" to="/domestic">更多国内线路>></router-link>
        </div>
        <div class="domestic-tabs">
            <!-- <router-link target="_blank" :to="`/line/32`" class="domestic-tabs-item">甘青宁</router-link>
            <router-link target="_blank" :to="`/line/2`" class="domestic-tabs-item">广东</router-link>
            <router-link target="_blank" :to="`/line/16`" class="domestic-tabs-item">福建</router-link>
            <router-link target="_blank" :to="`/line/19`" class="domestic-tabs-item">云贵渝</router-link>
            <router-link target="_blank" :to="`/line/24`" class="domestic-tabs-item">川藏</router-link>
            <router-link target="_blank" :to="`/line/14`" class="domestic-tabs-item">湖南</router-link>
            <router-link target="_blank" :to="`/line/15`" class="domestic-tabs-item">湖北</router-link>
            <router-link target="_blank" :to="`/line/20`" class="domestic-tabs-item">新疆</router-link>
            <router-link target="_blank" :to="`/line/25`" class="domestic-tabs-item">陕西</router-link>
            <router-link target="_blank" :to="`/line/26`" class="domestic-tabs-item">河南</router-link>
            <router-link target="_blank" :to="`/line/33`" class="domestic-tabs-item">山东</router-link>
            <router-link target="_blank" :to="`/line/4`" class="domestic-tabs-item">广西</router-link>
            <router-link target="_blank" :to="`/line/13`" class="domestic-tabs-item">海南</router-link>
            <router-link target="_blank" :to="`/line/17`" class="domestic-tabs-item">北京</router-link>
            <router-link target="_blank" :to="`/line/21`" class="domestic-tabs-item">内蒙</router-link>
            <router-link target="_blank" :to="`/line/27`" class="domestic-tabs-item">安徽</router-link>
            <router-link target="_blank" :to="`/line/28`" class="domestic-tabs-item">江西</router-link>
            <router-link target="_blank" :to="`/line/29`" class="domestic-tabs-item">山东</router-link>
            <router-link target="_blank" :to="`/line/31`" class="domestic-tabs-item">山西</router-link>
            <router-link target="_blank" :to="`/line/34`" class="domestic-tabs-item">江浙沪</router-link> -->
            <router-link target="_blank" :to="`/line/145`" class="domestic-tabs-item">广东</router-link>
            <router-link target="_blank" :to="`/line/228`" class="domestic-tabs-item">广西</router-link>
            <router-link target="_blank" :to="`/line/79`" class="domestic-tabs-item">云南</router-link>
            <router-link target="_blank" :to="`/line/214`" class="domestic-tabs-item">贵州</router-link>
            <router-link target="_blank" :to="`/line/164`" class="domestic-tabs-item">四川</router-link>
            <router-link target="_blank" :to="`/line/76`" class="domestic-tabs-item">海南</router-link>
            <router-link target="_blank" :to="`/line/114`" class="domestic-tabs-item">上海</router-link>
            <router-link target="_blank" :to="`/line/81`" class="domestic-tabs-item">东北</router-link>
            <router-link target="_blank" :to="`/line/78`" class="domestic-tabs-item">湖南</router-link>
            <router-link target="_blank" :to="`/line/356`" class="domestic-tabs-item">湖北</router-link>
            <router-link target="_blank" :to="`/line/172`" class="domestic-tabs-item">新疆</router-link>
            <router-link target="_blank" :to="`/line/245`" class="domestic-tabs-item">内蒙</router-link>
            <router-link target="_blank" :to="`/line/302`" class="domestic-tabs-item">陕西</router-link>
            <router-link target="_blank" :to="`/line/371`" class="domestic-tabs-item">河南</router-link>
            <router-link target="_blank" :to="`/line/122`" class="domestic-tabs-item">福建</router-link>
            <router-link target="_blank" :to="`/line/113`" class="domestic-tabs-item">安徽</router-link>
            <router-link target="_blank" :to="`/line/174`" class="domestic-tabs-item">山东</router-link>
            <router-link target="_blank" :to="`/line/204`" class="domestic-tabs-item">江西</router-link>
            <router-link target="_blank" :to="`/line/343`" class="domestic-tabs-item">山西</router-link>
            <router-link target="_blank" :to="`/line/339`" class="domestic-tabs-item">浙江</router-link>
            <router-link target="_blank" :to="`/line/321`" class="domestic-tabs-item">江苏</router-link>

        </div>
        <div class="domestic-list">
            <CustomCard width="264" height="405" imgHeight="300" v-for="rs in domesticList" :key="rs.id" :pic="rs.pic"
                :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
            <!-- <CustomCard width="264" height="405" imgHeight="300"></CustomCard>
            <CustomCard width="264" height="405" imgHeight="300"></CustomCard>
            <CustomCard width="264" height="405" imgHeight="300"></CustomCard> -->
        </div>

    </section>

    <section class="foreign" id="are3" ref="are3">
        <div class="box">
            <div class="df">
                <h2 class="h2">尊享欧洲</h2>
                <div class="df">
                    <div @click="europeTabsChange('西欧')"
                        :class="europeTabName == '西欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        西欧</div>
                    <div @click="europeTabsChange('南欧')"
                        :class="europeTabName == '南欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        南欧</div>
                    <div @click="europeTabsChange('北欧')"
                        :class="europeTabName == '北欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        北欧</div>
                    <div @click="europeTabsChange('东欧')"
                        :class="europeTabName == '东欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        东欧</div>
                </div>
                <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
            </div>
            <div class="foreign-citys">
                <router-link v-for="rs in europeTabsShow" :key="rs.id" :to="`/line/${rs.id}`">
                    <div class="foreign-city-item">{{ rs.title }}
                        <div class="English-name">{{ rs.title_en }}</div>
                    </div>
                </router-link>
                <!-- <div class="foreign-city-item foreign-city-item-show">芬兰
                    <div class="English-name">Finland</div>
                </div> -->
            </div>

            <div class="foreign-list">

                <CustomCard width="276" height="284" imgHeight="192" v-for="rs in foreignList" :key="rs.id"
                    :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                <!-- <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard> -->
            </div>
        </div>
    </section>

    <section class="asia box" id="are4" ref="are4">
        <div class="df">
            <h2 class="h2">玩转亚洲</h2>
            <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
        </div>
        <div class="df asia-box">
            <div class="sidebar">
                <div class="sidebar-area">
                    <div class="sidebar-title">东亚</div>
                    <div class="sidebar-navs">
                        <router-link target="_blank" to="/line/102" class="sidebar-nav-item clamp-line-1"
                            title="日本">日本</router-link>
                        <router-link target="_blank" to="/line/103" class="sidebar-nav-item clamp-line-1"
                            title="韩国">韩国</router-link>
                        <router-link target="_blank" to="/line/86" class="sidebar-nav-item clamp-line-1"
                            title="泰国">泰国</router-link>
                        <router-link target="_blank" to="/line/84" class="sidebar-nav-item clamp-line-1"
                            title="新加坡">新加坡</router-link>
                        <router-link target="_blank" to="/line/85" class="sidebar-nav-item clamp-line-1"
                            title="马来西亚">马来西亚</router-link>
                        <router-link target="_blank" to="/line/55" class="sidebar-nav-item clamp-line-1"
                            title="马来西亚">泰新马</router-link>
                        <router-link target="_blank" to="/line/89" class="sidebar-nav-item clamp-line-1"
                            title="越南">越南</router-link>
                        <router-link target="_blank" to="/line/90" class="sidebar-nav-item clamp-line-1"
                            title="柬埔寨">柬埔寨</router-link>
                        <router-link target="_blank" to="/line/328" class="sidebar-nav-item clamp-line-1"
                            title="菲律宾">菲律宾</router-link>
                        <router-link target="_blank" to="/line/329" class="sidebar-nav-item clamp-line-1"
                            title="文莱">文莱</router-link>
                    </div>
                </div>
                <div class="sidebar-area">
                    <div class="sidebar-title">南亚</div>
                    <div class="sidebar-navs">
                        <router-link target="_blank" to="/line/97" class="sidebar-nav-item clamp-line-1"
                            title="尼泊尔">尼泊尔</router-link>
                        <router-link target="_blank" to="/line/98" class="sidebar-nav-item clamp-line-1"
                            title="印度">印度</router-link>
                        <router-link target="_blank" to="/line/454" class="sidebar-nav-item clamp-line-1"
                            title="巴基斯坦">巴基斯坦</router-link>
                        <!-- <router-link target="_blank" to="/" class="sidebar-nav-item clamp-line-1" title="斯里兰卡">斯里兰卡</router-link> -->
                    </div>
                </div>
                <div class="sidebar-area">
                    <div class="sidebar-title">中亚</div>
                    <div class="sidebar-navs">
                        <router-link target="_blank" to="/line/455" class="sidebar-nav-item clamp-line-1"
                            title="哈萨克斯坦">哈萨克斯坦</router-link>
                        <router-link target="_blank" to="/line/456" class="sidebar-nav-item clamp-line-1"
                            title="吉尔吉斯斯坦">吉尔吉斯斯坦</router-link>
                        <router-link target="_blank" to="/line/460" class="sidebar-nav-item clamp-line-1"
                            title="乌兹别克斯坦">乌兹别克斯坦</router-link>
                        <router-link target="_blank" to="/line/524" class="sidebar-nav-item clamp-line-1"
                            title="土库曼斯坦">土库曼斯坦</router-link>
                    </div>
                </div>
                <div class="sidebar-area">
                    <div class="sidebar-title">西亚</div>
                    <div class="sidebar-navs">
                        <router-link target="_blank" to="/line/520" class="sidebar-nav-item clamp-line-1"
                            title="阿塞拜疆">阿塞拜疆</router-link>
                        <router-link target="_blank" to="/line/521" class="sidebar-nav-item clamp-line-1"
                            title="格鲁吉亚">格鲁吉亚</router-link>
                    </div>
                </div>
            </div>
            <div class="asia-right">
                <CustomCard width="264" height="270" imgHeight="180" direction="left" v-for="rs in asiaList"
                    :key="rs.id" :pic="rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                <!-- <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard>
                <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard>
                <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard>
                <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard>
                <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard> -->
            </div>
        </div>
    </section>

    <section class="foreign" id="are5" ref="are5">
        <div class="box">
            <div class="df">
                <h2 class="h2">畅玩非洲</h2>
                <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
            </div>
            <div class="foreign-tabs">
                <!-- foreign-tabs-item-show -->
                <div><router-link to="/line/111" target="_blank" class="foreign-tabs-item">埃及</router-link></div>
                <div><router-link to="/line/110" target="_blank" class="foreign-tabs-item">南非</router-link></div>
                <div><router-link to="/line/108" target="_blank" class="foreign-tabs-item">迪拜</router-link></div>
                <div><router-link to="/line/107" target="_blank" class="foreign-tabs-item">土耳其</router-link></div>
                <div><router-link to="/line/109" target="_blank" class="foreign-tabs-item">毛里求斯</router-link></div>
                <div><router-link to="/line/197" target="_blank" class="foreign-tabs-item">马达加斯加</router-link></div>
                <div><router-link to="/line/198" target="_blank" class="foreign-tabs-item">塞舌尔</router-link></div>
                <div><router-link to="/line/295" target="_blank" class="foreign-tabs-item">摩洛哥</router-link></div>
                <div><router-link to="/line/296" target="_blank" class="foreign-tabs-item">阿布扎比</router-link></div>
                <div><router-link to="/line/346" target="_blank" class="foreign-tabs-item">留尼汪岛</router-link></div>
            </div>

            <div class="foreign-list">
                <CustomCard width="276" height="284" imgHeight="192" v-for="rs in africaList" :key="rs.id"
                    :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                <!-- <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard> -->
            </div>
        </div>
    </section>

    <section class="foreign" id="are6" ref="are6">
        <div class="box">
            <div class="df">
                <h2 class="h2">尊享美洲</h2>
                <div class="df">
                    <div @click="americaTabsChange('北美')"
                        :class="americaTabName == '北美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        北美</div>
                    <div @click="americaTabsChange('中美')"
                        :class="americaTabName == '中美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        中美</div>
                    <div @click="americaTabsChange('南美')"
                        :class="americaTabName == '南美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        南美</div>
                </div>
                <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
            </div>
            <div class="foreign-citys">
                <router-link v-for="rs in americaTabsShow" :key="rs.id" :to="`/line/${rs.id}`">
                    <div class="foreign-city-item">{{ rs.title }}
                        <div class="English-name">{{ rs.title_en }}</div>
                    </div>
                </router-link>
            </div>

            <div class="foreign-list">
                <CustomCard width="276" height="284" imgHeight="192" v-for="rs in americaList" :key="rs.id"
                    :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                <!-- <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
                <CustomCard width="276" height="284" imgHeight="192"></CustomCard> -->
            </div>
        </div>
    </section>

    <section class="oceania box" id="are7" ref="are7">
        <div class="df">
            <h2 class="h2">大洋洲</h2>
            <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
        </div>
        <div class="df oceania-box">
            <div class="sidebar">
                <div class="sidebar-area">
                    <div class="sidebar-title">目的地</div>
                    <div class="sidebar-navs">
                        <router-link target="_blank" to="/line/61"
                            class="sidebar-nav-item clamp-line-1">澳大利亚</router-link>
                        <router-link target="_blank" to="/line/62"
                            class="sidebar-nav-item clamp-line-1">新西兰</router-link>
                        <router-link target="_blank" to="/line/63"
                            class="sidebar-nav-item clamp-line-1">澳洲海岛</router-link>
                        <router-link target="_blank" to="/line/104"
                            class="sidebar-nav-item clamp-line-1">斐济</router-link>
                        <router-link target="_blank" to="/line/105"
                            class="sidebar-nav-item clamp-line-1">大溪地</router-link>
                        <router-link target="_blank" to="/line/324"
                            class="sidebar-nav-item clamp-line-1">布里斯班</router-link>
                        <router-link target="_blank" to="/line/277"
                            class="sidebar-nav-item clamp-line-1">黄金海岸</router-link>
                        <router-link target="_blank" to="/line/278"
                            class="sidebar-nav-item clamp-line-1">大堡礁</router-link>
                        <router-link target="_blank" to="/line/279"
                            class="sidebar-nav-item clamp-line-1">悉尼</router-link>
                        <router-link target="_blank" to="/line/280"
                            class="sidebar-nav-item clamp-line-1">墨尔本</router-link>
                        <router-link target="_blank" to="/line/282"
                            class="sidebar-nav-item clamp-line-1">奥克兰</router-link>
                        <router-link target="_blank" to="/line/292"
                            class="sidebar-nav-item clamp-line-1">凯恩斯</router-link>
                        <router-link target="_blank" to="/line/318"
                            class="sidebar-nav-item clamp-line-1">皇后镇</router-link>

                    </div>
                </div>
            </div>
            <div class="oceania-right">
                <CustomCard width="264" height="270" imgHeight="180" direction="left" v-for="rs in oceaniaList"
                    :key="rs.id" :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id">
                </CustomCard>
                <!-- <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard>
                <CustomCard width="264" height="270" imgHeight="180" direction="left"></CustomCard> -->
            </div>
        </div>
    </section>

    <section class="foreign" id="are8" ref="are8">
        <div class="box">
            <div class="df">
                <h2 class="h2">缤纷海岛</h2>
                <router-link target="_blank" to="/islands" class="more">查看更多</router-link>
            </div>

            <div class="foreign-list" style="height: 170px;">
                <!-- <router-link target="_blank" v-for="rs in islandList" :key="rs.id" :pic="rs.pic"  :to="rs.id"  style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img :src="rs.pic"
                            alt="" class="foreign-island-img">
                        <div class="foreign-island-title">{{ rs.title }}</div>
                    </div>
                </router-link> -->

                <router-link target="_blank" to="/line/91" style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img src="https://admin.hqx.com.cn/Public/App/image/island-1.jpg" alt=""
                            class="foreign-island-img">
                        <div class="foreign-island-title">巴厘岛</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/line/93" style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img src="https://admin.hqx.com.cn/Public/App/image/island-2.jpg" alt=""
                            class="foreign-island-img">
                        <div class="foreign-island-title">普吉岛</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/line/92" style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img src="https://admin.hqx.com.cn/Public/App/image/island-3.jpg" alt=""
                            class="foreign-island-img">
                        <div class="foreign-island-title">沙巴岛</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/line/104" style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img src="https://admin.hqx.com.cn/Public/App/image/island-4.jpg" alt=""
                            class="foreign-island-img">
                        <div class="foreign-island-title">斐济</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/line/176" style="padding-top: 16px;">
                    <div class="foreign-island">
                        <img src="https://admin.hqx.com.cn/Public/App/image/island-5.jpg" alt=""
                            class="foreign-island-img">
                        <div class="foreign-island-title">塞班岛</div>
                    </div>
                </router-link>
            </div>
        </div>
    </section>

    <section class="theme-tour box" id="are9" ref="are9">
        <h2 class="h2">主题游</h2>
        <div class="theme-tour-category">
            <router-link target="_blank" to="/theme/list/7">
                <div class="category-item category-item-bg1">
                    <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (1).png" alt="">
                    <div class="category-item-title">研学</div>
                </div>
            </router-link>
            <router-link target="_blank" to="/theme/list/6">
                <div class="category-item category-item-bg2">
                    <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (2).png" alt="">
                    <div class="category-item-title">邮轮</div>
                </div>
            </router-link>
            <router-link target="_blank" to="/theme/list/11">
                <div class="category-item category-item-bg3">
                    <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (3).png" alt="">
                    <div class="category-item-title">爸妈游</div>
                </div>
            </router-link>
            <router-link target="_blank" to="/theme/list/10">
                <div class="category-item category-item-bg4">
                    <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (4).png" alt="">
                    <div class="category-item-title">海岛</div>
                </div>
            </router-link>
            <router-link target="_blank" to="/theme/list/5">
                <div class="category-item category-item-bg5">
                    <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (5).png" alt="">
                    <div class="category-item-title">团建</div>
                </div>
            </router-link>
        </div>
        <div class="df">
            <div class="theme-tour-banner-hot">
                <div class="banner-hot-item">
                    <router-link target="_blank" to="/"></router-link>
                </div>
                <div class="banner-hot-item">
                    <router-link target="_blank" to="/"></router-link>
                </div>
            </div>
            <div class="theme-tour-banner">
                <router-link target="_blank" to="/"></router-link>
            </div>
        </div>
    </section>

    <section class="foreign" id="are10" ref="are10">
        <div class="box visa">
            <div class="df">
                <h2 class="h2">热门签证</h2>
                <div class="df">
                    <div @click="getVisa(49)"
                        :class="visaTabId == 49 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        亚洲
                    </div>
                    <div @click="getVisa(2)"
                        :class="visaTabId == 2 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">欧洲
                    </div>
                    <div @click="getVisa(7)"
                        :class="visaTabId == 7 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">美洲
                    </div>
                    <div @click="getVisa(50)"
                        :class="visaTabId == 50 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        大洋洲
                    </div>
                    <div @click="getVisa(51)"
                        :class="visaTabId == 51 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                        非洲
                    </div>
                </div>
                <router-link target="_blank" to="/visa" class="more">查看更多</router-link>
            </div>
            <ul class="visa-con">

                <li v-for="rs in visaShow" :key="rs.id">
                    <router-link target="_blank" :to="`/visa/list/${rs.id}`">
                        <div class="flag">
                            <img :src="'https://admin.hqx.com.cn/Public/Uploads/' + rs.pic" />
                        </div>
                        <h4 class="clamp-line-1">{{ rs.title }}</h4>
                        <p>￥{{ rs.price }}元/人</p>
                    </router-link>
                </li>
                <!-- <li>
                    <router-link target="_blank" :to="`/visa/details/1`">
                        <div class="flag">
                            <img
                                src="https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2016/03/16/56e92f3feff5a.jpg" />
                        </div>
                        <h4 class="clamp-line-1">美国旅游签证-全国受理【含EVUS登记-不含陪签】【线上】</h4>
                        <p>￥3999元/人</p>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" :to="`/visa/details/1`">
                        <div class="flag">
                            <img
                                src="https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2016/03/16/56e92f3feff5a.jpg" />
                        </div>
                        <h4 class="clamp-line-1">美国旅游签证-全国受理【含EVUS登记-不含陪签】【线上】</h4>
                        <p>￥3999元/人</p>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" :to="`/visa/details/1`">
                        <div class="flag">
                            <img
                                src="https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2016/03/16/56e92f3feff5a.jpg" />
                        </div>
                        <h4 class="clamp-line-1">美国旅游签证-全国受理【含EVUS登记-不含陪签】【线上】</h4>
                        <p>￥3999元/人</p>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" :to="`/visa/details/1`">
                        <div class="flag">
                            <img
                                src="https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2016/03/16/56e92f3feff5a.jpg" />
                        </div>
                        <h4 class="clamp-line-1">美国旅游签证-全国受理【含EVUS登记-不含陪签】【线上】</h4>
                        <p>￥3999元/人</p>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" :to="`/visa/details/1`">
                        <div class="flag">
                            <img
                                src="https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2016/03/16/56e92f3feff5a.jpg" />
                        </div>
                        <h4 class="clamp-line-1">美国旅游签证-全国受理【含EVUS登记-不含陪签】【线上】</h4>
                        <p>￥3999元/人</p>
                    </router-link>
                </li> -->
                <!-- <li v-for="rs in discounts" :key="rs.id">
            <router-link target="_blank" :to="`/visa/details/${rs.id}`">
              <div class="flag">
                <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
              </div>
              <h4>{{ rs.title }}</h4>
              <p>￥{{ rs.price }}元/人</p>
            </router-link>
          </li> -->
            </ul>
        </div>
    </section>

    <section class="foreign">
        <div class="box">
            <div class="df">
                <h2 class="h2">服务案例</h2>
                <router-link target="_blank" to="/about" class="more">查看更多</router-link>
            </div>
            <!-- <n-carousel effect="card" prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
                next-slide-style="transform: translateX(50%) translateZ(-800px);" style="height: 265px"
                :show-dots="false">
                <n-carousel-item :style="{ width: '60%' }" class="carousel-box">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg">
                    <div class="carousel-title">2024深圳市宝安区福永人民医院工会春游活动</div>
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }" class="carousel-box">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg">
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }" class="carousel-box">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg">
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }" class="carousel-box">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg">
                </n-carousel-item>
            </n-carousel> -->

            <n-carousel :slides-per-view="3" :space-between="20" :loop="false" :show-arrow="true" draggable
                class="carousel">

                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel2.jpg">
                    <div class="carousel-title">凝心聚力 携手前行！五一清远非洲鼓团建亲子游</div>
                </n-carousel-item>
                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel1.jpg">
                    <div class="carousel-title">2024深圳市宝安区福永人民医院工会春游活动</div>
                </n-carousel-item>
                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel3.png">
                    <div class="carousel-title">南山中加学校井冈山500人研学之旅</div>
                </n-carousel-item>
                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel4.png">
                    <div class="carousel-title">日立电梯深圳公司湖南长沙衡山团建之旅</div>
                </n-carousel-item>
                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel5.png">
                    <div class="carousel-title">闪魔科技有限公司600人温泉团建</div>
                </n-carousel-item>
                <n-carousel-item>
                    <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel6.png">
                    <div class="carousel-title">松下电子3000人团建活动</div>
                </n-carousel-item>
                <!-- <template #arrow="{ prev, next }">
                    <div class="custom-arrow">
                        <button type="button" class="custom-arrow--left" @click="prev">
                            <n-icon>
                                <ArrowBack />
                            </n-icon>
                        </button>
                        <button type="button" class="custom-arrow--right" @click="next">
                            <n-icon>
                                <ArrowForward />
                            </n-icon>
                        </button>
                    </div>
                </template> -->
            </n-carousel>

        </div>
    </section>


    <new-footer></new-footer>
    <back-top />
    <!-- </div> -->
    <!-- <div style="height: 2000px;"></div> -->
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import CustomCard from "@/components/card/CustomCard.vue";
import headerHome from "@/components/general/HeaderHome.vue";
import { index_banner, line_items, theme_items, visa_country } from "@/api/travel";
import nationEurope from '@/assets/dictionaries/nationEurope.js';
import nationAmerica from '@/assets/dictionaries/nationAmerica.js';

// line_items 简化
let getItem = async (ids, limit = 4) => {
    let res = await line_items({
        ids, // 商品id
        limit
    });
    return res.data;
};

let getItemArea = async (area, limit = 4) => {
    let res = await line_items({
        area, // 目的地
        limit
    });

    return res.data;
};
let getItemDes = async (des, limit = 4) => {
    let res = await line_items({
        des, // 地区
        limit
    });
    return res.data;
};
let getItemTheme = async (theme, limit = 4) => {
    let res = await line_items({
        theme, // 地区
        limit
    });
    return res.data;
};




// 当季热门推荐
let tabsIndex = ref(0);

// 选项卡滑入事件
let tabEnter = (des) => {
    tabsIndex.value = des;
};

let hotList = ref([])

const getHotList = async () => {
    let res1 = await getItemDes(1);
    let res2 = await getItem('6617,7740,7582,7743');
    let res3 = await getItemDes(2);
    let res4 = await getItemTheme(10);
    hotList.value = [res1, res2, res3, res4];
}
let hotItem = computed(() => {
    return hotList.value[tabsIndex.value]
})

// 畅游国内
let domesticList = ref([]);
// 欧洲
let foreignList = ref([]);
// 亚洲
let asiaList = ref([]);
// 非洲
let africaList = ref([]);
// 美洲
let americaList = ref([]);
// 大洋洲
let oceaniaList = ref([]);
// 海岛
let islandList = ref([]);


let getCountryLists = async () => {
    // 国内
    domesticList.value = await getItem('6617,7740,7582,7743');
    // 欧洲
    foreignList.value = await getItem('7897,7857,7850,7845');
    // 亚洲
    asiaList.value = await getItem('7737,7424,7419,7727,7736,7906', 6);
    // 非洲
    africaList.value = await getItem('7827,7826,7825,7810');
    // 美洲
    americaList.value = await getItem('7863,7859,7647,7646');
    // 大洋洲
    oceaniaList.value = await getItem('7941,7936,7820');
    // 海岛
    islandList.value = await getItem('7951,7950,7949,7930,7926', 5);
}

// let visaTab = ref({});
let visaTabId = ref(49);
let visaShow = ref([]);

let getVisa = async (id) => {
    visaTabId.value = id;
    visaShow.value = (await visa_country(id)).data;
}

let europeTabName = ref('西欧');
const europeTabsChange = (title) => {
    europeTabName.value = title;
}
const europeTabsShow = computed(() => {
    return nationEurope[europeTabName.value]
})
let americaTabName = ref('北美');
const americaTabsChange = (title) => {
    americaTabName.value = title;
}
const americaTabsShow = computed(() => {
    return nationAmerica[americaTabName.value]
})

// 定位锚点
let are1 = ref(null)
let are2 = ref(null)
let are3 = ref(null)
let are4 = ref(null)
let are5 = ref(null)
let are6 = ref(null)
let are7 = ref(null)
let are8 = ref(null)
let are9 = ref(null)
let are10 = ref(null)

// 滚动条位置
let scrollPosition = ref('');
let scrollNavId = ref(1);
// 盒子距离 
let boxDistance = ref({})

// 点击导航栏
let clickNav = (id) => {
    window.scrollTo({
        top: boxDistance.value[id]
    })
}

// 滚动事件处理函数
const handleScroll = (e) => {
    // 获取滚动条位置
    scrollPosition.value = window.scrollY || document.documentElement.scrollTop;
    if (scrollPosition.value <= boxDistance.value[1]) {
        scrollNavId.value = 1;
    } else if (scrollPosition.value <= boxDistance.value[2]) {
        scrollNavId.value = 2;
    } else if (scrollPosition.value <= boxDistance.value[3]) {
        scrollNavId.value = 3;
    } else if (scrollPosition.value <= boxDistance.value[4]) {
        scrollNavId.value = 4;
    } else if (scrollPosition.value <= boxDistance.value[5]) {
        scrollNavId.value = 5;
    } else if (scrollPosition.value <= boxDistance.value[6]) {
        scrollNavId.value = 6;
    } else if (scrollPosition.value <= boxDistance.value[7]) {
        scrollNavId.value = 7;
    } else if (scrollPosition.value <= boxDistance.value[8]) {
        scrollNavId.value = 8;
    } else if (scrollPosition.value <= boxDistance.value[9]) {
        scrollNavId.value = 9;
    } else {
        scrollNavId.value = 10;
    }

};



onMounted(() => {

    window.addEventListener('scroll', handleScroll);


    // 1  580
    // 2  1040
    // 3  1659
    // 4  2203
    // 5  2899
    // 6  3377
    // 7  3861
    // 8  4261
    // 9  4541
    // 10 5228


    getHotList();
    getCountryLists();
    getVisa(visaTabId.value);
    setTimeout(() => {
        boxDistance.value = {
            1: are1.value.getBoundingClientRect().top,
            2: are2.value.getBoundingClientRect().top,
            3: are3.value.getBoundingClientRect().top,
            4: are4.value.getBoundingClientRect().top,
            5: are5.value.getBoundingClientRect().top,
            6: are6.value.getBoundingClientRect().top,
            7: are7.value.getBoundingClientRect().top,
            8: are8.value.getBoundingClientRect().top,
            9: are9.value.getBoundingClientRect().top,
            10: are10.value.getBoundingClientRect().top
        }
    }, 0)
});

// 移除滚动监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped lang="scss">
@import url('@/css/home/home.scss');
</style>